{extend name="wap/default_new/base" /}
{block name="resources"}
<style>
.user-info{background: #f44;padding:10px;}
.user-info div{width:50px;margin: 10px auto;text-align: center;}
.user-info img{border-radius:50%;max-width: 100%;max-height: 100%;vertical-align: middle;}
.user-info h4{color:#ffffff;text-align: center;font-weight: normal;}
.spelling-order-list ul li{background: #ffffff;margin-bottom: 10px;}
.spelling-order-list ul li header{padding:10px;}
.spelling-order-list ul li header label{display: block;}
.spelling-order-list ul li header label a{float:right;color:#f44;}
.spelling-order-list ul li header time{color:#999999;font-size:12px;}
.spelling-order-list ul li article{padding:10px;background: #f3f3f3;overflow: hidden;}
.spelling-order-list ul li article .goods-img{width:50px;float:left;margin-right: 10px;}
.spelling-order-list ul li article .goods-img img{max-width: 100%;max-height: 100%;vertical-align: middle;}
.spelling-order-list ul li article .goods-info{float:left;width:76%;height: 50px;position: relative;}
.spelling-order-list ul li article .goods-info label{font-size:12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.spelling-order-list ul li article .goods-info .money{position: absolute;bottom: 0;}
.spelling-order-list ul li article .goods-info .num{color:#999999;font-size:12px;margin-left:5px;}
.spelling-order-list ul li footer{display: block;padding:10px;margin:0;border:0;text-align: left;overflow: hidden;}
.spelling-order-list ul li footer span{vertical-align: middle;line-height: 35px;}
.spelling-order-list ul li footer span strong{color:#f44;font-weight: normal;}
.btn-invitation-friend{color:#ffffff;background: #f44;border:0;float: right;padding:5px 8px;border-radius:3px;font-size:12px;margin-top:2.5px;}
.btn-invitation-friend:active{background: #e04141;}
.spelling-order-list ul li footer ul {position: relative;}
.spelling-order-list ul li footer ul li{position: absolute;}
.spelling-order-list ul li footer ul li div{width:30px;}
.spelling-order-list ul li footer ul li div img{border-radius:50%;max-width: 100%;max-height: 100%;vertical-align: middle;}
.btn-order-info{border:1px solid #e5e5e5;padding:5px 8px;background: #ffffff;border-radius:3px;float:right;font-size:12px;}
</style>
{/block}
{block name="goodsHead"}{/block}
{block name="main"}
<section class="head">
	<a class="head_back" id="backoutapp" href="{:__URL('APP_MAIN/member/index')}"><i class="icon-back"></i></a>
	<div class="head-title">我的拼单</div>
</section>
<div style="height:44px;"></div>
<div class="user-info" style="display:none;">
	<div><img></div>
	<h4></h4>
</div>
<div class="spelling-order-list"></div>
<input type="hidden" id="ms_time" value="{niu:currenttime/}"/>
<input type="hidden" id="page_count"><!-- 总页数 -->
<input type="hidden" id="page"><!-- 当前页数 -->
<input type="hidden" id="status" value="all">
<script>
$(function(){

	GetDataList(1);
	
});

var is_load = false;//防止重复加载
function GetDataList(page){
	if(page == undefined || page == "") page = 1;
	$("#page").val(page);//设置当前页
	$("#status").val(status);//保存当前状态
	if(is_load) return false;
	is_load = true;
	$.ajax({
		type:'post',
		data:{"page":page},
		dataType:'json',
		success:function(data){
			$("#page_count").val(data['page_count']);//总页数
			if(page == 1){
				var datahtml = "";
			}else if(page > 1){
				var datahtml = $('#list_content').html();
			}
			
			var html = '';
			if(data['data'].length==0){
				html += '<p style="padding: 50px;background: #ffffff;text-align: center;">您当前还没有拼单哦</p>';
			}else{
				html += '<ul>';
				for(var i=0;i<data['data'].length;i++){
					var curr = data['data'][i];
					html += '<li>';
					
						html += '<header>';
							html += '<label>';
								html += '<span>发起了拼单</span>';

								if(curr.status == 1){
									html += '<a href="#">待分享</a>';
								}else if(curr.status == 2){
									html += '<a href="#">拼单成功</a>';
								}
							html += '</label>';
							html += '<time>' + timeStampTurnTime(curr.create_time) + '</time>';
						html += '</header>';
						
						html += '<article onclick="location.href=\'' + __URL("APP_MAIN/goods/goodsdetail?id=" + curr.goods_id) + '\'">';
							html += '<div class="goods-img">';
								html += '<img src="' + __IMG(curr.picture_info.pic_cover_micro) + '"/>';
							html += '</div>';
							
							html += '<div class="goods-info">';
								html += '<label>' + curr.goods_name + '</label>';
								html += '<span class="money">￥' + curr.tuangou_money + '<span class="num">' + curr.tuangou_num + '人拼单</span></span>';
							html += '</div>';
						html += '</article>';
						
						html += '<footer>';
							if(curr.status == 1){
								html += '<span>还剩<strong>' + (curr.tuangou_num-curr.real_num) + '</strong>人，<time data-end-time="' + curr.end_time + '">剩余00:00:00</time></span>';
								html += '<button class="btn-invitation-friend" data-goods-id="' + curr.goods_id + '" data-group-id="' + curr.group_id + '">邀请好友拼单</button>';
							}else if(curr.status == 2){
								html += '<ul>';
									html += '<li>';
										html += '<div>';
											html += '<img src="' + __IMG(curr.group_user_head_img) + '"/>';
										html += '</div>';
									html += '</li>';
								html += '</ul>';
								html += '<button class="btn-order-info" onclick="location.href=\'' + __URL('APP_MAIN/PintuanOrder/orderdetail?orderId=' + curr.order_id)  + '\'">查看订单详情</button>';
							}
						html += '</footer>';
						
					html += '</li>';
				}
				html += '</ul>';
				var user_img = "__TEMP__/{$style}/public/images/member_default.png";
				if(data['data'][0].group_user_head_img != ""){
					user_img = __IMG(data['data'][0].group_user_head_img);
				}
				$(".user-info img").attr("src",user_img);
				$(".user-info h4").text(data['data'][0].group_name);
				$(".user-info").show();
			}
			$(".spelling-order-list").html(html);
			
			CountDown();
			$(".btn-invitation-friend").click(function(){
				location.href = __URL(APPMAIN + "/PintuanOrder/spellGroupShare?goods_id=" + $(this).attr("data-goods-id") + "&group_id=" + $(this).attr("data-group-id"));
			});
			is_load = false;
		}
	});
}

function CountDown(){
	$(".spelling-order-list li time").each(function(){
		var time = $(this).attr("data-end-time");
		var obj = $(this);
		if(null != time && "" != time){
			var sys_second = (time-$("#ms_time").val());///1000;
			
			if(sys_second>1){
				sys_second -= 1;
				var day = Math.floor((sys_second / 3600) / 24);
				var hour = Math.floor((sys_second / 3600) % 24);
				var minute = Math.floor((sys_second / 60) % 60);
				var second = Math.floor(sys_second % 60);
				var s_hour = hour<10?"0"+hour:hour;
				var s_minute = minute<10?"0"+minute:minute;
				var s_second = second<10?"0"+second:second;
				var str = s_hour + ":" + s_minute + ":" + s_second;
				obj.text("剩余" + str);
			}else{
				obj.text("拼单已结束");
			}
			var timer = setInterval(function(){
				if (sys_second > 1) {
					sys_second -= 1;
					var day = Math.floor((sys_second / 3600) / 24);
					var hour = Math.floor((sys_second / 3600) % 24);
					var minute = Math.floor((sys_second / 60) % 60);
					var second = Math.floor(sys_second % 60);
					var s_hour = hour<10?"0"+hour:hour;
					var s_minute = minute<10?"0"+minute:minute;
					var s_second = second<10?"0"+second:second;
					var str = s_hour + ":" + s_minute + ":" + s_second;
					obj.text("剩余" + str);
				} else { 
					obj.text("拼单已结束");
					clearInterval(timer);
				}
			}, 1000);
		}
	});
}

//app端返回值
$("#backoutapp").click(function (){
	var json ={"center" : "1"};
	window.webkit.messageHandlers.center.postMessage(json);
});

//滑动到底部加载
$(window).scroll(function(){
	var totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
	var content_box_height = parseFloat($("#list_content").height());
	if(totalheight - content_box_height >= 80){
		if(!is_load){
			var page = parseInt($("#page").val()) + 1;//页数
			var total_page_count = $("#page_count").val(); // 总页数
			var status = $('#status').val();
			if(page > total_page_count){
				return false;
			}else{
				GetDataList(page);
			}
		}
	}
});
</script>
{/block}
{block name="bottom"}{/block}